<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				//html():设置标签中的内容，可写标签（一般情况不推荐，js写html内容太逆天了）
				$("div").html("今天天气好晴朗，处处好风光");
				$("div").html("<input type='button' value='保存'/>");//可以写标签
				
				//text():设置标签中的内容，仅能写文字
				$("div").text("尘土飞扬");//执行text后，div中的html被覆盖了
				$("div").text("<input type='button' value='保存'/>");//只能写文本
				
				//append():如果不想覆盖
				$("div").append("6666666666");//追加标签内容，并未覆盖掉text的内容
				$("div").append("<input type='button' value='保存'/>");//也可以写标签
				
				
				//each():遍历，分别处理每一个元素
				$("p").each(function(){
					//遍历每一个元素的代码
					$(this).html($(this).index());//获取当前(this)元素的序号(index)
				});
				
				
				
				//
				
			});
		</script>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- index 0 -->
		<div></div>
		
		<div class="carousel" id="myCarousel">
			<div class="carousel_images">
				<ul>
					<li style="display: none;" class="cur">
						<a href="javascript:;"><img src="js/0.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/1.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/2.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/3.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/4.jpg"/></a>
					</li>
				</ul>
			</div>
			<div class="carousel_nav">
				<ol>
					<li class="cur"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
			<div class="carousel_btns">
				<a href="javascript:;" class="btn left"></a>
				<a href="javascript:;" class="btn right"></a>
			</div>
		</div>
		
		<!-- index 1-5 -->
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		
		
		
	</body>
</html>